<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments_login :: head(~{::title})">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <title>发布帖子</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
  <link href="../static/css/app.css" rel="stylesheet">
  <link href="../static/css/style.min.css" rel="stylesheet">
  <link href="../static/css/me.css" rel="stylesheet">
  <!--    引入editormd.min.css-->
  <link rel="stylesheet" href="../static/lib/editormd/css/editormd.min.css"/>
</head>

<body>
<nav th:replace="_fragments_login :: menu(0)" class="ui inverted attached segment m-padded-tb-mini">
  <div class="ui container"> <!-- 加一个容器 -->
    <div class="ui inverted secondary stackable menu"> <!-- 菜单 stackable:可堆叠的,表示屏幕小时自动堆叠-->
      <h2 class="ui white header item">GuideSystem</h2> <!-- 蓝绿色标题 -->
      <a href="#" class="m-item m-mobile-hide item"><i class="home icon"></i>首页</a> <!-- icon表示图表 -->
      <a href="#" class="m-item m-mobile-hide item"><i class="edit outline icon"></i>记录</a>
      <a href="#" class="m-item m-mobile-hide item"><i class="info icon"></i>我的</a>
      <div class="m-top-right m-mobile-hide item m-item" style="margin-top: 5px"> <!-- 靠右 -->
        <div class="ui icon input">
          <input type="text" placeholder="Search...">
          <i class="search link icon"></i>
        </div>
        <div class="ui dropdown item">
          <div class="text">
            <img src="../static/images/店铺1.jpg" th:src="@{/images/IMG_6361.JPG}"
                 alt="" class="ui avatar image">
          </div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <a href="#" th:href="@{/login/exit}" class="item">足迹</a>
            <a href="#" th:href="@{/login}" class="item">我的</a>
            <a href="#" th:href="@{/edit/password}" class="item">修改密码</a>
            <a href="#" th:href="@{/login/exit}" class="item">退出</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="ui menu toggle black button icon m-top-right m-mobile-show">
    <i class="sidebar icon"></i>
  </a>
</nav>

<div class="m-container-large m-padded-tb-big" id="contentDiv">
  <div class="ui container">
    <!--页面主要内容-->
    <div class="container-fluid">
      <div class="card">
        <div class="card-body">
          <form action="#" th:action="@{/fblog/input/success}" method="post" th:object="${blog}" class="ui form">
            <input type="hidden" name="id" th:value="${blog?.id}">
            <div class="two fields">
              <div class="required field">
                <label for="type" class="ui header">发布社区</label>
                <!--<div class="form-controls field">
                  <select name="forum.id" class="form-control" id="type">
                    <option value="0"></option>
                    <option value="GuideSystem学习" th:value="${forum.id}" th:each="forum : ${forums}"
                            th:text="${forum.forumName}">GuideSystem学习
                    </option>
                    &lt;!&ndash;/*&ndash;&gt;
                    <option value="活动专区">活动专区</option>
                    <option value="公开课专区">公开课专区</option>
                    <option value="讨论专区">讨论专区</option>
                    &lt;!&ndash;*/&ndash;&gt;
                  </select>
                </div>-->
                <div class="ui fluid selection dropdown">
                  <input type="hidden" name="forum.id" id="type" th:value="${blog?.forum?.id}">
                  <i class="dropdown icon"></i>
                  <div class="default text"></div>
                  <div class="menu">
                    <div th:each="forum : ${forums}" class="item" th:text="${forum?.forumName}" data-value="1"
                         th:data-value="${forum?.id}">错误日志
                    </div>
                    <!--/*-->
                    <div class="item" data-value="2">开发者手册</div>
                    <!--*/-->
                  </div>
                </div>
              </div>

              <div class="required field">
                <label for="title" class="ui header">标题</label>
                <input type="text" class="form-control" id="title" name="title" th:value="${blog?.title}"
                       placeholder="请输入标题"/>
              </div>
            </div>

            <div class="required field">
              <label for="content" class="ui header">帖子内容</label>
              <div id="md-content" style="z-index: 1 !important">
                    <textarea id="content" name="content" style="display: none" th:text="${blog?.content}"
                              placeholder="请输入内容..."></textarea>
              </div>
            </div>

            <div class="required field">
              <label for="description" class="ui header">帖子简介</label>
              <textarea class="form-control" id="description" name="description" style="height: 60px"
                        th:text="${blog?.description}"
                        placeholder="请输入简介..."></textarea>
            </div>

            <div class="required field">
              <label for="tag" class="ui header">标签</label>
              <div class="ui fluid selection dropdown">
                <input type="hidden" name="tag.id" id="tag" th:value="${blog?.tag?.id}">
                <i class="dropdown icon"></i>
                <div class="default text"></div>
                <div class="menu">
                  <div th:each="tag : ${tags}" class="item" data-value="1" th:data-value="${tag?.id}"
                       th:text="${tag?.name}">错误日志
                  </div>
                  <!--/*-->
                  <div class="item" data-value="2">开发者手册</div>
                  <!--*/-->
                </div>
              </div>
            </div>

            <div class="form-group col-md-12 field">
              <label for="firstPicture" class="ui header">首图</label>
              <input class="form-control" id="firstPicture" name="firstPicture" th:value="${blog?.firstPicture}"
                     placeholder="首图地址">
            </div>

            <div class="form-group col-md-12 field">
              <label class="ui header">状态</label>
              <div class="clearfix">
                <label class="radio-inline" for="published">
                  <input type="radio" id="published" name="published" value="0">
                  隐私
                </label>
                <label class="radio-inline" for="_published">
                  <input type="radio" id="_published" name="published" value="1">
                  公共
                </label>
              </div>
            </div>

            <div class="form-group col-md-12">
              <button type="submit" class="ui blue basic right floated button">确 认</button>&nbsp;
              <button type="button" class="ui basic right floated button"
                      onclick="javascript:history.back(-1);return false;">返 回
              </button>
            </div>

            <div class="ui error message" style="margin-top: 2em!important;"></div>

          </form>
        </div>
      </div>
    </div>
    <!--End 页面主要内容-->
  </div>
</div>

<footer th:replace="_fragments_login :: footer" class="ui inverted vertical segment m-padded-tb-massive">
  <!-- vertical:垂直的 segment:条横 inverted:倒置的 -->
  <div class="ui center aligned container"> <!-- center aligned:居中 aligned:使成为一条线-->
    <div class="ui inverted divided stackable grid"> <!-- inverted divided grid:格线分成16份 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">消费者权益</h4>
        <div class="ui inverted link list">
          <span class="item m-text-thin">消费者热线：3838438</span>
          <span class="item m-text-thin">外卖热线：5201314</span>
          <span class="item m-text-thin">已获得食品安全局认证</span>
        </div>
      </div>

      <!-- 分成三列 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">商家加盟</h4>
        <div class="ui inverted link list">
          <a href="#" class="item m-text-thin">食品外卖开店申请</a>
          <a href="#" class="item m-text-thin">美食商家入驻(非外卖)</a>
          <a href="#" class="item m-text-thin">合作/招聘</a>
        </div>
      </div>

      <!-- 分成三列 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">联系我</h4>
        <div class="ui inverted link list">
          <span class="item m-text-thin" style="height: 28px">邮箱: 1923326384@qq.com</span>
          <span class="item m-text-thin">QQ: 1923326384</span>
        </div>
      </div>

      <!-- 分成七列 -->
      <div class="seven wide column">
        <h4 class="ui inverted header m-text-thin">企业文化</h4>
        <p class="m-text-thin m-text-spaced m-opacity-mini m-text-lined">
          消费者第一，商家第二 | 诚信诚实正直，言出必践言行一致 | 以“吃”为核心，建设生活服务业从需求侧到供给侧的多层次科技服务平台。
        </p>
      </div>

    </div>
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright @ 2022-05-29 HanYuFan Designed by HanYuFan</p>
  </div>
</footer>

<th:block th:replace="_fragments_login :: script">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  <script type="text/javascript" src="../static/js/app.js"></script>
  <script type="text/javascript" src="../static/js/main.min.js"></script>
  <script src="../static/lib/editormd/editormd.min.js"></script>
</th:block>
<script>

    $(function () {
        testEditor = editormd("md-content", {
            width: "100%",
            height: 640,
            syncScrolling: "single",
            path: "/dev/lib/editormd/lib/"
        });
    });

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    $('.ui.form').form({
        fields: {
            title: {
                identifier: 'title',
                rules: [{
                    type: 'empty',
                    prompt: '标题: 请输入帖子标题'
                }]
            },

            content: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '内容: 请输入帖子内容'
                }]
            },

            tag: {
                identifier: 'tag',
                rules: [{
                    type: 'empty',
                    prompt: '标签: 请选择需发布的标签类别'
                }]
            },

            description: {
                identifier: 'description',
                rules: [{
                    type: 'empty',
                    prompt: '简介: 请输入帖子简介'
                }]
            },

            forum: {
                identifier: 'forum.id',
                rules: [{
                    type: 'empty',
                    prompt: '论坛: 请选择需发布的论坛'
                }]
            }
        }
    });

</script>

</body>
</html>